/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useRef, useState } from 'react';
import themeless from '@/theme.module.less';
export type theme = 'light' | 'dark';

export type darkType = {
  theme: theme;
};

const useDark = (props: darkType) => {
  const light = {
    color: '#213547',
    color_background_hover: '#f2f2f2',
    color_background: '#ffffff',
    color_border: '#f0f0f0',
    color_head: '#ffffff',
  };

  const dark = {
    color: '#fff',
    color_background_hover: '#00274d',
    color_background: '#181818',
    color_border: '#545454',
    color_head: '#001529',
  };

  const [theme, setTheme] = useState<theme>(props.theme);
  const currentTheme = useRef<theme>();

  useEffect(() => {
    currentTheme.current = theme;
    setThemeFn();
  }, [theme]);

  const setThemeFn = () => {
    if (theme === 'dark') {
      document.documentElement.style.setProperty(
        `--${themeless.antPrefix}-color`,
        dark.color
      );
      document.documentElement.style.setProperty(
        `--${themeless.antPrefix}-color-background-hover`,
        dark.color_background_hover
      );
      document.documentElement.style.setProperty(
        `--${themeless.antPrefix}-color-background`,
        dark.color_background
      );
      document.documentElement.style.setProperty(
        `--${themeless.antPrefix}-color-border`,
        dark.color_border
      );
      document.documentElement.style.setProperty(
        `--${themeless.antPrefix}-color-head`,
        dark.color_head
      );
    } else {
      document.documentElement.style.setProperty(
        `--${themeless.antPrefix}-color`,
        light.color
      );
      document.documentElement.style.setProperty(
        `--${themeless.antPrefix}-color-background-hover`,
        light.color_background_hover
      );
      document.documentElement.style.setProperty(
        `--${themeless.antPrefix}-color-background`,
        light.color_background
      );
      document.documentElement.style.setProperty(
        `--${themeless.antPrefix}-color-border`,
        light.color_border
      );
      document.documentElement.style.setProperty(
        `--${themeless.antPrefix}-color-head`,
        light.color_head
      );
    }
  };

  const toogle = (te: theme) => {
    setTheme(te);
  };

  return { currentTheme, theme, toogle };
};

export default useDark;
